<template>
  <div class="favorite-container container">
    <div class="page-title">
      <h2>我的收藏</h2>
    </div>
    
    <div class="favorite-list card" v-loading="loading">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="收藏车辆" name="vehicles">
          <div class="vehicle-list" v-if="favoriteVehicles.length > 0">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="item in favoriteVehicles" :key="item.id">
                <el-card shadow="hover" class="vehicle-card">
                  <div class="vehicle-image">
                    <img :src="item.imageUrl" :alt="item.name">
                    <div class="vehicle-actions">
                      <el-button type="danger" icon="el-icon-delete" circle size="mini" @click.stop="handleRemoveFavorite(item.id)"></el-button>
                    </div>
                  </div>
                  <div class="vehicle-info" @click="viewVehicleDetail(item.id)">
                    <h3 class="vehicle-title">{{ item.name }}</h3>
                    <div class="vehicle-meta">
                      <span><i class="el-icon-odometer"></i> {{ item.type }}</span>
                      <span><i class="el-icon-user"></i> {{ item.seats }}座</span>
                    </div>
                    <div class="vehicle-bottom">
                      <div class="vehicle-price">
                        <span class="price">¥{{ item.dailyPrice }}</span>
                        <span class="unit">/天</span>
                      </div>
                      <el-button size="small" type="primary" @click.stop="rentNow(item.id)">租车</el-button>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
          <el-empty v-else description="暂无收藏车辆"></el-empty>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserFavorite',
  data() {
    return {
      loading: false,
      activeTab: 'vehicles',
      favoriteVehicles: []
    }
  },
  created() {
    this.fetchFavorites()
  },
  methods: {
    fetchFavorites() {
      this.loading = true
      
      // 模拟获取收藏数据
      setTimeout(() => {
        this.favoriteVehicles = [
          {
            id: 1,
            name: '奥迪A6L',
            type: '豪华轿车',
            seats: 5,
            dailyPrice: 399,
            imageUrl: 'https://img2.baidu.com/it/u=306367250,2071323421&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500'
          },
          {
            id: 2,
            name: '宝马X5',
            type: 'SUV',
            seats: 5,
            dailyPrice: 599,
            imageUrl: 'https://img0.baidu.com/it/u=935297709,3165513922&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
          },
          {
            id: 3,
            name: '丰田凯美瑞',
            type: '中型轿车',
            seats: 5,
            dailyPrice: 299,
            imageUrl: 'https://img0.baidu.com/it/u=3581278429,1145643938&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
          }
        ]
        this.loading = false
      }, 800)
    },
    handleRemoveFavorite(id) {
      this.$confirm('确定要取消收藏该车辆吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 模拟取消收藏
        this.favoriteVehicles = this.favoriteVehicles.filter(item => item.id !== id)
        this.$message.success('已取消收藏')
      }).catch(() => {
        this.$message.info('已取消操作')
      })
    },
    viewVehicleDetail(id) {
      this.$router.push(`/vehicle/detail/${id}`)
    },
    rentNow(id) {
      this.$router.push({
        path: '/order/create',
        query: { vehicleId: id }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.favorite-container {
  padding: 20px 0;
  
  .page-title {
    margin-bottom: 20px;
    
    h2 {
      font-size: 24px;
      font-weight: 500;
      color: #303133;
      margin: 0;
    }
  }
  
  .card {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
  }
  
  .vehicle-list {
    margin-top: 20px;
    
    .vehicle-card {
      margin-bottom: 20px;
      cursor: pointer;
      transition: transform 0.3s, box-shadow 0.3s;
      
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        
        .vehicle-image {
          .vehicle-actions {
            opacity: 1;
          }
        }
      }
      
      .vehicle-image {
        position: relative;
        height: 160px;
        overflow: hidden;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.3s;
        }
        
        .vehicle-actions {
          position: absolute;
          top: 10px;
          right: 10px;
          opacity: 0;
          transition: opacity 0.3s;
        }
      }
      
      .vehicle-info {
        padding: 15px 0 5px;
        
        .vehicle-title {
          font-size: 16px;
          margin: 0 0 10px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .vehicle-meta {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 10px;
          color: #666;
          font-size: 13px;
          
          span {
            margin-right: 15px;
            margin-bottom: 5px;
            
            i {
              margin-right: 5px;
            }
          }
        }
        
        .vehicle-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .vehicle-price {
            .price {
              font-size: 18px;
              font-weight: bold;
              color: #f56c6c;
            }
            
            .unit {
              font-size: 12px;
              color: #999;
            }
          }
        }
      }
    }
  }
}
</style> 